import React from 'react';

import './dialog.scss'

interface IProps {
  show: boolean;
  title?: string;
  onCancel: () => void;
}

export const Dialog: React.FC<IProps> = (props) => {
  const { show = true, title, onCancel, children } = props;
  const style = {
    display: show ? 'block' : 'none'
  }

  const handleClose = (e: any) => {
    if (e.target === e.currentTarget) {
      onCancel();
    }
  }

  return (
    <>
      <div
        className="dialog-wrapper"
        style={style}
        onClick={(e) => handleClose(e)}
      >
        <div className="dialog-normal">
          <div className="dialog-header">
            <h1>
              { title || '提示'}
            </h1>
            <span
              className="dialog-close"
              onClick={e => handleClose(e)}
            >×</span>
          </div>
          <div className="dialog-body">
          { children }
          </div>
        </div>
      </div>
      <div className="dialog-modal" style={style}></div>
    </>
  )
}
